<template>
	<view class="app">
		<wrap title="基础用法">
			<van-cell is-link title="选择单个日期" data-type="single" data-id="selectSingle" :value="formatFullDate(date.selectSingle)"
			 @click="show" />
			<van-cell is-link title="选择多个日期" data-type="multiple" data-id="selectMultiple" :value="formatMultiple(date.selectMultiple)"
			 @click="show" />
			<van-cell is-link title="选择日期区间" data-type="range" data-id="selectRange" :value="formatRange(date.selectRange)"
			 @click="show" />
		</wrap>

		<wrap title="快捷选择">
			<van-cell is-link title="选择单个日期" data-type="single" data-id="quickSelect1" :value="formatFullDate(date.quickSelect1)"
			 @click="show" />

			<van-cell is-link title="选择日期区间" data-type="range" data-id="quickSelect2" :value="formatRange(date.quickSelect2)"
			 @click="show" />
		</wrap>
		<wrap title="自定义日历">
			<van-cell is-link title="自定义颜色" data-type="range" data-id="customColor" :value="formatRange(date.customColor)"
			 @click="show" />

			<van-cell is-link title="自定义日期范围" data-type="single" data-id="customRange" :value="formatFullDate(date.customRange)"
			 @click="show" />

			<van-cell is-link title="自定义按钮文字" data-type="range" data-id="customConfirm" :value="formatRange(date.customConfirm)"
			 @click="show" />

			<van-cell is-link title="自定义日期文案" data-type="range" data-id="customDayText" :value="formatRange(date.customDayText)"
			 @click="onShow1" />

			<van-cell is-link title="自定义弹出位置" data-type="single" data-id="customPosition" :value="formatFullDate(date.customPosition)"
			 @click="show" />

			<van-cell is-link title="日期区间最大范围" data-type="range" data-id="maxRange" :value="formatRange(date.maxRange)" @click="show" />
		</wrap>
		<wrap title="平铺展示">
			<van-calendar title="日历" :poppable="false" :show-confirm="false" :min-date="tiledMinDate" :max-date="tiledMaxDate"
			 class="tiled-calendar" @select="onSelect1" />
		</wrap>

		<van-calendar :show="showCalendar" :type="type" :color="color" :round="round" :position="position" :min-date="minDate"
		 :max-date="maxDate" :max-range="maxRange" :formatter="formatter" :show-confirm="showConfirm" :confirm-text="confirmText"
		 :confirm-disabled-text="confirmDisabledText" @confirm="onConfirm" @select="onSelect" @unselect="onUnselect" @open="onOpen"
		 @opened="onOpened" @close="onClose" @closed="onClosed">
		</van-calendar>

		<van-calendar :show="showCalendarF" type="range" :min-date="minDate" :max-date="maxDate" :formatter="dayFormatter"
		 @confirm="onConfirm1" @close="onClose1" />

		<van-toast id="van-toast" />
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import Page from '../../common/page';
	export default {
		data() {
			return {
				date: {
					maxRange: [],
					selectSingle: null,
					selectRange: [],
					selectMultiple: [],
					quickSelect1: null,
					quickSelect2: [],
					customColor: [],
					customConfirm: [],
					customRange: null,
					customDayText: [],
					customPosition: null
				},
				type: 'single',
				round: true,
				color: undefined,
				minDate: Date.now(),
				maxDate: new Date(
					new Date().getFullYear(),
					new Date().getMonth() + 6,
					new Date().getDate()
				).getTime(),
				maxRange: undefined,
				position: undefined,
				formatter: undefined,
				showConfirm: false,
				showCalendar: false,
				tiledMinDate: new Date(2012, 0, 10).getTime(),
				tiledMaxDate: new Date(2012, 2, 20).getTime(),
				confirmText: undefined,
				confirmDisabledText: undefined,
				showCalendarF: false
			}
		},
		methods: {
			// 自定义日期文案 开始
			onShow1(event) {
				this.minDate = new Date(2010, 4, 1).getTime();
				this.maxDate = new Date(2010, 4, 31).getTime();
				this.showCalendarF = true;
			},
			onConfirm1(event) {
				this.showCalendarF = false;
			},
			onClose1(event) {
				this.showCalendarF = false;
			},
			//自定义日期文案  结束

			onConfirm(event) {
				console.log(event);
				this.showCalendar = false;
				this.date[this.id] = event.detail;
			},

			onSelect(event) {
				console.log(event);
			},
			onSelect1(event) {
				console.log(event.detail);
				this.$toast(event.detail.toLocaleString());
			},
			onUnselect(event) {
				console.log(event);
			},

			onClose() {
				this.showCalendar = false;
			},

			onOpen() {
				console.log('open');
			},

			onOpened() {
				console.log('opened');
			},

			onClosed() {
				console.log('closed');
			},

			resetSettings() {
				const pageData = {
					round: true,
					color: null,
					minDate: Date.now(),
					maxDate: new Date(
						new Date().getFullYear(),
						new Date().getMonth() + 6,
						new Date().getDate()
					).getTime(),
					maxRange: null,
					position: 'bottom',
					formatter: null,
					showConfirm: true,
					confirmText: '确定',
					confirmDisabledText: null
				};
				Object.assign(this, pageData)
			},

			show(event) {
				this.resetSettings();
				const {
					type,
					id
				} = event.currentTarget.dataset;
				const data = {
					id,
					type,
					showCalendar: true
				};

				switch (id) {
					case 'quickSelect1':
					case 'quickSelect2':
						data.showConfirm = false;
						break;
					case 'customColor':
						data.color = '#07c160';
						break;
					case 'customConfirm':
						data.confirmText = '完成';
						data.confirmDisabledText = '请选择结束时间';
						break;
					case 'customRange':
						data.minDate = new Date(2010, 0, 1).getTime();
						data.maxDate = new Date(2010, 0, 31).getTime();
						break;
					case 'customDayText':
						data.minDate = new Date(2010, 4, 1).getTime();
						data.maxDate = new Date(2010, 4, 31).getTime();
						data.formatter = this.dayFormatter;
						break;
					case 'customPosition':
						data.round = false;
						data.position = 'right';
						break;
					case 'maxRange':
						data.maxRange = 3;
						break;
				}
				Object.assign(this, data)
			},

			dayFormatter(day) {
				const month = day.date.getMonth() + 1;
				const date = day.date.getDate();

				if (month === 5) {
					if (date === 1) {
						day.topInfo = '劳动节';
					} else if (date === 4) {
						day.topInfo = '五四青年节';
					} else if (date === 11) {
						day.text = '今天';
					}
				}

				if (day.type === 'start') {
					day.bottomInfo = '入店';
				} else if (day.type === 'end') {
					day.bottomInfo = '离店';
				}
				// console.log(day)
				return day;
			},
			formatDate(date) {
				if (date) {
					date = getDate(date);
					return date.getMonth() + 1 + '/' + date.getDate();
				}
			},

			formatFullDate(date) {
				if (date) {
					date = getDate(date);
					return date.getFullYear() + '/' + formatDate(date);
				}
			},

			formatMultiple(dates) {
				if (dates.length) {
					return '选择了 ' + dates.length + '个日期';
				}
			},
			formatRange(dateRange) {
				if (dateRange.length) {
					return formatDate(dateRange[0]) + ' - ' + formatDate(dateRange[1]);
				}
			}

		}
	}
</script>

<style>
	.tiled-calendar {
		--calendar-height: 500px;
	}
</style>
